import React from 'react';
import { Button, Space, Typography } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import styles from './PageHeader.module.css';

const { Title } = Typography;

interface PageHeaderProps {
  title: string;
  onBack?: () => void;
  extra?: React.ReactNode;
}

const PageHeader: React.FC<PageHeaderProps> = ({ 
  title, 
  onBack, 
  extra 
}) => {
  const navigate = useNavigate();

  const handleBack = () => {
    if (onBack) {
      onBack();
    } else {
      navigate(-1);
    }
  };

  return (
    <div className={styles.header}>
      <Space className={styles.titleWrapper}>
        <Button 
          type="text"
          icon={<ArrowLeftOutlined />}
          onClick={handleBack}
          className={styles.backButton}
        />
        <Title level={2} className={styles.title}>
          {title}
        </Title>
      </Space>
      {extra && <div className={styles.extra}>{extra}</div>}
    </div>
  );
};

export default PageHeader; 